<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>组件预览</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    // 接收父窗口发送的代码
    window.addEventListener('message', (event) => {
      if (event.data.type === 'UPDATE_CODE') {
        try {
          // 解析代码
          const code = event.data.code
          const app = document.getElementById('app')
          
          // 创建Vue应用
          const { createApp } = Vue
          const component = {
            template: code.match(/<template>([\s\S]*)<\/template>/)[1],
            setup() {
              return eval(`(function(){
                ${code.match(/<script setup>([\s\S]*)<\/script>/)[1]}
                return { }
              })()`)
            }
          }
          
          // 添加样式
          const style = document.createElement('style')
          style.textContent = code.match(/<style[^>]*>([\s\S]*)<\/style>/)[1]
          document.head.appendChild(style)
          
          // 挂载应用
          createApp(component).mount(app)
        } catch (error) {
          console.error('预览错误:', error)
        }
      }
    })
  </script>
</body>
</html> 